<!--
 * @Author: wangjian
 * 656876071@qq.com
 * @Date: 2024-08-12 16:05:21
 * @LastEditTime: 2024-09-13 15:32:53
 * @FilePath: src/views/sys/menu/MenuForm.vue
 * @Description: 
 -->
<script setup lang="ts">
import {useForm} from './Hooks'
import {SIMPLE_FORM_SUBMIT_KEY} from "@/core/common/hooks/FormHooks";
import DictSelect from "@/core/common/component/DictSelect.vue";

const callback = defineEmits([SIMPLE_FORM_SUBMIT_KEY])
const {
  catalogTree,
  form,
  modalIsVisible,
  modalIsSubmitting,
  modalSubmit,
  showEditForm,
  showAddForm
} = useForm(callback)

defineExpose({
  showAddForm,
  showEditForm
})
</script>

<template>
  <a-modal v-model:open="modalIsVisible" title="菜单目录维护" width="30rem" :maskClosable="false">
    <template #footer>
      <a-button key="back" @click="modalIsVisible = false">取消</a-button>
      <a-button :loading="modalIsSubmitting" key="submit" type="primary" @click="modalSubmit">录入</a-button>
    </template>
    <a-form :disabled="modalIsSubmitting" :label-col="{span:5}" :wrapper-col="{span: 18}" label-align="right">
      <!--      <a-form-item label="目录">-->
      <!--        <a-input v-model:value="form.parentId" placeholder="请输入"/>-->
      <!--      </a-form-item>     -->
      <a-form-item label="挂载目录">
        <a-tree-select
            v-model:value="form.parentId"
            show-search
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择挂载目录"
            allow-clear
            tree-default-expand-all
            :tree-data="catalogTree"
            tree-node-filter-prop="menuName"
            :field-names="{
            children: 'children',
            label: 'menuName',
            value: 'menuId',
          }"
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item label="菜单名称">
        <a-input v-model:value="form.menuName" placeholder="请输入菜单名称"/>
      </a-form-item>
      <a-form-item label="菜单编码">
        <dict-select dictCode="sys_menu_type" v-model:value="form.menuType" style="width: 100%"/>
      </a-form-item>
      <div v-if="form.menuType === 'MENU'">
        <a-form-item label="组件">
          <a-input v-model:value="form.component" placeholder="请输入组件"/>
        </a-form-item>
        <a-form-item label="路由地址">
          <a-input v-model:value="form.routeUrl" placeholder="请输入路由地址"/>
        </a-form-item>
        <a-form-item label="参数">
          <a-input v-model:value="form.params" placeholder="请输入参数"/>
        </a-form-item>
      </div>
      <a-form-item label="图标">
        <a-input v-model:value="form.icon" placeholder="请输入图标"/>
      </a-form-item>
      <a-form-item label="顺序">
        <a-input v-model:value="form.orderNum" placeholder="请输入图标"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped>

</style>